<template>
	<view class="area_partner">
		<view class="list">
			<view class="type">体验店名称</view>
			<view class="list_right">
				<input class="input" v-model="title" type="text" placeholder="请输入体验店名称">
			</view>
		</view>
		<view class="list" @tap="showPicker('region')">
			<view class="type">所选区域</view>
			<view class="list_right">
				<view>{{showaddress}}</view>
				<image class="l_img" src="../../static/images/location.png" mode=""></image>
			</view>
		</view>
		<view class="list" @tap="chooseLocation">
			<view class="type">体验店位置</view>
			<view class="list_right">
				<view class="area">{{address}}</view>
				<image class="l_img" src="../../static/images/location.png" mode=""></image>
			</view>
		</view>
		<view class="list">
			<view class="type">营业时间</view>
			<view class="list_right">
				<input class="input" v-model="businessTime" type="text" placeholder="请输入营业时间">
			</view>
		</view>
		<view class="list">
			<view class="type">店铺简介</view>
			<view class="list_right">
				<input class="input" v-model="description" type="text" placeholder="请输入店铺简介">
			</view>
		</view>
		<view class="list">
			<view class="type">上级体验店/代理</view>
			<view class="list_right">
				<input class="input" v-model="pnum" type="text" placeholder="请输入上级编号">
			</view>
		</view>
		<view class="list">
			<view class="type">申请人姓名</view>
			<view class="list_right">
				<input class="input" v-model="contactName"  type="text" placeholder="请输入姓名">
			</view>
		</view>
		<view class="list">
			<view class="type">申请人电话</view>
			<view class="list_right">
				<input class="input" v-model="contactPhone"  type="text" placeholder="请输入电话">
			</view>
		</view>
		<view class="list">
			<view class="type">身份证号</view>
			<view class="list_right">
				<input class="input" v-model="idCardNum" type="text" placeholder="请输入身份证号">
			</view>
		</view>
		<view class="list" >
			<view class="type">支付宝账号</view>
			<view class="list_right">
				<input class="input" v-model="aliAccount" type="text" placeholder="请输入支付宝账号">
			</view>
		</view>
		<view class="list" >
			<view class="type">银行名称</view>
			<view class="list_right">
				<input class="input" v-model="bankName" type="text" placeholder="请输入银行名称">
			</view>
		</view>
		<view class="list" >
			<view class="type">银行卡号</view>
			<view class="list_right">
				<input class="input" v-model="bankNumber" type="text" placeholder="请输入银行卡号">
			</view>
		</view>
		<view class="list list1" >
			<view class="type">开户行地址</view>
			<view class="list_right">
				<input class="input" v-model="bankOpName" type="text" placeholder="请输入开户行地址">
			</view>
		</view>
		<view class="name">请上传门头体验店照片</view>
		<view class="file_box">
			<view class="file_btn" @click="chooseImage(1)">
				<image class="icon" :src="imgSrc"></image>
			</view>
		</view>
		<view class="name">请上传店铺内景照</view>
		<view class="file_box">
			<view class="file_btn" @click="chooseImage(2)">
				<image class="icon" src="/static/images/add_img.png"></image>
			</view>
			<view class="file_img" v-for="(item,index) in imgsSrc" :key="index">
				<view class="delete_box" @click="del(index,2)">
					<image class="icon" src="/static/images/shanchu_icon2.png" mode=""></image>
				</view>
				<image class="imgurl" :src="item" mode=""></image>
			</view>
		</view>
		<view class="name">请上传营业执照</view>
		<view class="file_box">
			<view class="file_btn" @click="chooseImage(3)">
				<image class="icon" :src="businessImg"></image>
			</view>
		</view>
		<view class="name">备注：{{remark}}</view>
		<view class="btn" @click="subinfo" v-show="status==0 || status==3">提交申请</view>
		<view class="btn" v-show="status==1">审核中</view>
		<view class="btn" v-show="status==2">已通过</view>
		<w-picker mode="region" @confirm="onConfirm($event,'region')" ref="region"></w-picker>
		<view class="btn" @click="houtai" v-show="status==2">管理后台</view>
	</view>
</template>

<script>
	import wPicker from '@/components/w-picker/w-picker.vue';
	export default {
		components:{
			wPicker
		},
		data() {
			return {
				url:'http://smyl.qingkangqingyang.com/api/miaozhimini/weixin/fileUpload',
				showaddress:'请选择',
				province:'',
				provinceCode:'',
				cityCode:'',
				areaCode:'',
				businessTime:'',
				description:'',
				lon:'',
				lat:'',
				imgSrc:'/static/images/add_img.png',
				imgsSrc:[],
				businessImg:'/static/images/add_img.png',
				bankOpName:'',
				bankNumber:'',
				bankName:'',
				aliAccount:'',
				idCardNum:'',
				contactName:'',
				contactPhone:'',
				pnum:'',
				address:'请选择',
				title:'',
				userinfo:[],
				has:0,
				status:0,
				remark:'',
				id:0
			}
		},
		onShow() {
		},
		onLoad() {
			this.userinfo=uni.getStorageSync('user');
			this.getinfo();
		},
		methods: {
			showPicker(type) {
				this.$refs[type].show();
			},
			onConfirm(res, type) {
				switch (type) {
					case "region":
						this.showaddress = res.result;
						this.provinceCode = res.value[0];
						this.cityCode = res.value[1];
						this.areaCode = res.value[2];
						this.province = res.obj.province.label;
						this.city = res.obj.city.label;
						this.area = res.obj.area.label;
						break;
				}
			},
			getinfo(){
				var that=this;
				this.$http.get('shop/getMyshop',{}).
				then(function (response) {
					var data=response.data;
					console.log(data);
					if(data.has==1){
						var data = data.data;
						that.title=data.title;
						that.contactPhone=data.contactPhone;
						that.address=data.address;
						that.showaddress = data.province+data.city+data.area;
						that.bankOpName=data.bankOpName;
						that.bankNumber=data.bankNumber;
						that.pnum=data.topshopnum;
						that.bankName=data.bankName;
						that.aliAccount=data.aliAccount;
						that.idCardNum=data.idCardNum;
						that.contactName=data.contactName;
						that.imgSrc=data.imgSrc;
						that.imgsSrc=data.imgsSrc;
						that.businessImg=data.businessImg;
						that.status=data.status;
						that.province=data.province;
						that.provinceCode=data.provinceCode;
						that.city=data.city;
						that.cityCode=data.cityCode;
						that.area=data.area;
						that.areaCode=data.areaCode;
						that.description=data.description;
						that.businessTime=data.businessTime;
						that.remark=data.remark?data.remark:'无';
						that.id = data.id;
					}
				}).catch(function (error) {
					console.log(error);
				});
			},
			chooseImage(n){
				var that=this;
				uni.chooseImage({
					count: 6, //默认9
					sourceType: ['album'], 
					success:(res)=>{
						const tempFilePaths = res.tempFilePaths;
						this.user_avatar=res.tempFilePaths[0];
						uni.showLoading({
							title:'上传中',
						})
						uni.uploadFile({
							url: that.url, //仅为示例，非真实的接口地址
							filePath: res.tempFilePaths[0],
							name: 'file',
							formData: {
							},
							success: (uploadFileRes) => {
								uni.hideLoading();
								if(n == 1){
									this.imgSrc=JSON.parse(uploadFileRes.data).data;
								}else if(n == 2){
									
									let imglist=JSON.parse(uploadFileRes.data).data;
									this.imgsSrc=this.imgsSrc.concat(JSON.parse(uploadFileRes.data).data);
								}else if(n == 3){
									this.businessImg=JSON.parse(uploadFileRes.data).data;
								}
							}
						});
						
						
					}
				});
			},
			del(index){
				this.imgsSrc.splice(index,1)
			},
			chooseLocation:function(){
				uni.chooseLocation({
					success: (res) =>{
						this.address = res.address+"-"+res.name;
						this.lat = res.latitude;
						this.lon = res.longitude;
					}
				});
			},
			subinfo(){
				if(this.address==''||this.address==undefined||this.address==null){
					uni.showToast({
						icon:'none',
						title:'请选择地址'
					})
					return;
				}
				
				if(this.title==''||this.title==undefined||this.title==null){
					uni.showToast({
						icon:'none',
						title:'请填写体验店名称'
					})
					return;
				}
				if(this.contactName==''||this.contactName==undefined||this.contactName==null){
					uni.showToast({
						icon:'none',
						title:'请填写联系人'
					})
					return;
				}
				if(this.contactPhone==''||this.contactPhone==undefined||this.contactPhone==null){
					uni.showToast({
						icon:'none',
						title:'请填写联系电话'
					})
					return;
				}
				if(this.bankOpName==''||this.bankOpName==undefined||this.bankOpName==null){
					uni.showToast({
						icon:'none',
						title:'请填写开户行'
					})
					return;
				}
				if(this.bankName==''||this.bankName==undefined||this.bankName==null){
					uni.showToast({
						icon:'none',
						title:'请填写银行名称'
					})
					return;
				}
				if(this.bankNumber==''||this.bankNumber==undefined||this.bankNumber==null){
					uni.showToast({
						icon:'none',
						title:'请填写银行卡号'
					})
					return;
				}
				if(this.aliAccount==''||this.aliAccount==undefined||this.aliAccount==null){
					uni.showToast({
						icon:'none',
						title:'请填写支付宝账号'
					})
					return;
				}
				
				if(this.businessTime==''||this.businessTime==undefined||this.businessTime==null){
					uni.showToast({
						icon:'none',
						title:'请填写营业时间'
					})
					return;
				}
				if(this.description==''||this.description==undefined||this.description==null){
					uni.showToast({
						icon:'none',
						title:'请填写店铺简介'
					})
					return;
				}
				if(this.idCardNum==''||this.idCardNum==undefined||this.idCardNum==null){
					uni.showToast({
						icon:'none',
						title:'请填写身份证号'
					})
					return;
				}
				if(this.pnum==''||this.pnum==undefined||this.pnum==null){
					uni.showToast({
						icon:'none',
						title:'请填写推荐店铺'
					})
					return;
				}
				if(this.imgSrc==''||this.imgSrc==undefined||this.imgSrc==null){
					uni.showToast({
						icon:'none',
						title:'请上传门头照片'
					})
					return;
				}
				if(this.imgsSrc==''||this.imgsSrc==undefined||this.imgsSrc==null){
					uni.showToast({
						icon:'none',
						title:'请上传店铺内照片'
					})
					return;
				}
				if(this.businessImg==''||this.businessImg==undefined||this.businessImg==null){
					uni.showToast({
						icon:'none',
						title:'请上传营业执照'
					})
					return;
				}
				var imgsSrcstr=this.imgsSrc.join('|');
				var that=this;
				var title='确认提交申请吗？';
				uni.showModal({
				    title: '提示',
				    content: title,
				    success: function (res) {
				        if (res.confirm) {
							that.$http.post('shop/addShopApply',{'address':that.address,'lon':that.lon,'lat':that.lat,'imgSrc':that.imgSrc,'businessImg':that.businessImg,'bankOpName':that.bankOpName,'bankNumber':that.bankNumber,'bankName':that.bankName,'aliAccount':that.aliAccount,'idCardNum':that.idCardNum,'contactName':that.contactName,'pnum':that.pnum,'title':that.title,'contactPhone':that.contactPhone,'imgsSrc':imgsSrcstr,'province':that.province,'provinceCode':that.provinceCode,'city':that.city,'cityCode':that.cityCode,'area':that.area,'areaCode':that.areaCode,'businessTime':that.businessTime,'description':that.description}).
							then(function (response) {
								if(response.code==-1){
									uni.showToast({
										icon:'none',
										title:response.msg
									})
									return;
								}else{
									uni.showToast({
										icon:'none',
										title:'提交成功，请耐心等待审核！'
									})
									var clock=setInterval(function(){
										clearInterval(clock);
										uni.navigateBack();
									},1500);
								}
							}).catch(function (error) {
								console.log(error);
							});
				        }
				    }
				});
			},
			houtai(){
				uni.navigateTo({
					url:'/pages/shopAdmin/shopAdmin?id='+this.id
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.area_partner{
		width: 100%;
		padding-bottom: 100rpx;
		.btn{
			margin: 100rpx auto 0;
			width: 690rpx;
			background: #6686f5;
			color: #fff;
			font-size: 32rpx;
			font-weight: bold;
			border-radius: 48rpx;
			height: 96rpx;
			line-height: 96rpx;
			text-align: center;
		}
		.file_box{
			display: flex;
			padding-left: 30rpx;
			flex-wrap: wrap;
			.file_btn{
				width: 220rpx;
				height: 220rpx;
				border-radius: 5px;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 15rpx;
				margin-bottom: 20rpx;
				.icon{
					display:block;
					width: 220rpx;
					height: 220rpx;
				}
			}
			.file_img{
				width: 220rpx;
				height: 220rpx;
				border-radius: 5px;
				border: 1px solid #e5e5e5;
				box-sizing: border-box;
				position: relative;
				margin-right: 15rpx;
				margin-bottom: 20rpx;
				.imgurl{
					display: block;
					width: 100%;
					height: 100%;
				}
				.delete_box{
					position: absolute;
					top: 0;
					right: 0;
					width: 60rpx;
					height: 60rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					z-index: 2;
					.icon{
						display: block;
						width: 31rpx;
						height: 31rpx;
					}
				}
			}
		}
		.name{
			padding: 30rpx;
			color: #333;
			font-size: 32rpx;
		}
		.list{
			border-top: 1px solid #e5e5e5;
			padding: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			&.list1{
				border-bottom: 1px solid #e5e5e5;
			}
			.list_right{
				display: flex;
				align-items: center;
				color: #333;
				font-size: 32rpx;
				.area{
					width: 450rpx;
					text-align: right;
				}
				.input{
					text-align: right;
					color: #333;
					font-size: 28rpx;
				}
				.l_img{
					margin-left: 10rpx;
					width: 32rpx;
					height: 32rpx;
				}
			}
			.type{
				color: #333;
				font-size: 32rpx;
			}
		}
	}
</style>

